<template>
    <div class="container">
        <div class="box">
            <span>未冬</span>
            <img :src="require('../assets/cs-img/logo1.png')" alt="">
        </div>
        <!-- <div> -->
        <van-swipe :loop="false" :touchable="true"  @change="onChange">
            <van-swipe-item >
                <div class="text common">
                    <div>探索未知</div>
                    <div>途见不凡</div>
                </div>
                <div style="height:25vh"></div>
            </van-swipe-item>
            <van-swipe-item >
                <!-- fff0f3 -->
                <div class="text common">
                    <div>行以致远</div>
                    <div>见所未见</div>
                </div>
                <div style="height:25vh"></div>
            </van-swipe-item>
            <van-swipe-item>
                <div class="text common">
                    <div>未见三尺积雪</div>
                    <div>冬前览尽天山</div>
                </div>
                <router-link to="/index" style="height:25vh" class="common">
                    <van-button round block type="info" native-type="submit"  >立即体验</van-button>
                </router-link>
            </van-swipe-item>
            <!-- <template #indicator>
                    <div class="custom-indicator">{{ current + 1 }}/4</div>
                </template> -->
        </van-swipe>
        <!-- </div> -->
    </div>
</template>
<script>
export default {
    data() {
        return {
            current: 0,
            
        }
    },
    methods: {
        onChange(index) {
            this.current = index;
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep .van-swipe__indicator{
    width: 10px;
    height: 10px;
    background-color:#fdc03a ;
}
.container {


    .box {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 50vh;

        span {
            color: #000;
            font-size: 40px;
            font-weight: bold;
            // margin: 0 auto;
        }

        img {
            width: 160px;

        }


    }

    .van-swipe-item {
        display: flex;
        width: 100%;
        height: 50vh;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        .text{
            height: 25vh;
            font-size: 40px;
        }
        .common{
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;

        }
        .van-button{
            background-color: #fdc03a;
            width: 180px;
            font-size: 20px;
            color: #323232;
            border: none;
        }
    }
}
</style>